<template>
  <div>
    <div v-if="areaData.length>0" ref="barCharts" v-loading="loading" style="width: 100%; height: 360px;" />
    <el-empty v-else description="暂无数据" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import semApi from '@/api/baidu'
import '../../../../node_modules/echarts/map/js/china'
export default {
  props: ['siteId'],
  data() {
    return {
      areaData: '',
      maxValue: '',
      loading: false,
      site_id: ''
    }
  },
  watch: { // 监听到数据变化以后 重新调用一下
    siteId(val, value) {
      this.site_id = val
      this.$nextTick(() => {
        this.getArea()
      })
    }
  },
  created() {
    this.site_id = this.siteId
    this.getArea()
  },

  methods: {
    // 用户地区分步
    getArea() {
      this.loading = true
      semApi.areaList({ site_id: this.site_id }).then(res => {
        const arr = []
        const arr2 = []
        res.data.forEach(el => {
          arr.push({
            name: el.name,
            value: el.pv_count,
            // pv_count: el.pv_count,
            pv_ratio: el.pv_ratio
          })
          arr2.push(el.pv_count)
        })
        this.areaData = arr
        arr2.sort(function(a, b) { return b - a })
        // 排序 取到最大值
        this.maxValue = arr2[0]
        this.$nextTick(() => {
          this.init()// 执行echarts
        })
        this.loading = false
      })
    },

    init() {
      var data1 = this.areaData
      var maxValue = this.maxValue
      var option = {
        title: {
          subtext: '',
          itemGap: 30,
          left: 'center',
          textStyle: {
            color: '#000',
            fontStyle: 'normal',
            fontWeight: 'bold',
            fontSize: 30
          },

          subtextStyle: {
            color: '#58d9df',
            fontStyle: 'normal',
            fontWeight: 'bold',
            fontSize: 16
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: function(e) {
            var name = e.name ? e.name : '获取中'
            var value = e.value ? e.value : '暂无数据'
            var pv_ratio = e.data ? e.data.pv_ratio : '暂无数据'
            if (e.value) {
              return `${name}:<br>浏览量:${value}<br>占比:${pv_ratio}% `
            }
          }

        },

        visualMap: {
          min: 0,
          max: maxValue,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: false, // 显示高低数值
          inRange: {
            color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
          }
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {
              readOnly: false
            },
            restore: {},
            saveAsImage: {}
          }
        },

        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            normal: {

              show: false, // 展示省份名
              color: '#c1c4c8'
            },
            emphasis: {
              show: false,
              color: '#292929'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#fbfbfb',
              borderColor: '#b9b4b7'

            },
            emphasis: {
              areaColor: '#ffe167'
            }
          }
        },
        series: [{
          type: 'map',
          mapType: 'china',
          geoIndex: 0,
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data: data1
        }]
      }
      var myEcharts = echarts.init(this.$refs.barCharts)
      myEcharts.setOption(option)
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    }
  }
}
</script>

<style scoped>

</style>
